<script setup lang="ts">
  import Header from './Header.vue'
  import Table from './Table.vue'
  import { ref } from 'vue'
  import {
    useFaultTypesEnable,
    useFaultTypesDisable,
    useFaltTypesDel,
  } from '@/services/pages/know/fault'
  import { HMessage, HMessageBox } from '@/components/common/message'
  import infoTip from '@/config/info-tip'
  import { ElMessageBox } from 'element-plus'

  const { faultTypesDel } = useFaltTypesDel()
  const { faultTypesDisable } = useFaultTypesDisable()
  const { faultTypesEnable } = useFaultTypesEnable()

  // 表格组件实例
  const tableInstance = ref<InstanceType<typeof Table> | null>(null)

  // 选择的故障分类id集合
  const selectedFaultTypeIds = ref<Array<string>>([])

  /**
   * 获取列表
   */
  const onGetList = () => {
    if (tableInstance.value) {
      tableInstance.value.getFaultTypes()
    }
  }

  /**
   * 故障分类列表选项更新事件
   * @param {Array<string>} faultTypeIds - 故障分类id集合
   */
  const handleSelectionChange = (faultTypeIds: Array<string>) => {
    selectedFaultTypeIds.value = faultTypeIds
  }

  /**
   * 批量操作
   * @param {'del' | 'enable' | 'disable'} type - 操作类型
   */
  const handleMultipleOperate = (type: 'del' | 'enable' | 'disable') => {
    if (selectedFaultTypeIds.value.length <= 0) {
      HMessageBox.error(infoTip.know.fault.type.noSelectFaultType)
      return
    }

    const messageOption = {
      del: infoTip.know.fault.type.multipleDel,
      disable: infoTip.know.fault.type.multipleDisable,
      enable: infoTip.know.fault.type.multipleEnable,
    }

    ElMessageBox({
      title: '提示',
      type: type === 'del' ? 'error' : 'warning',
      showCancelButton: true,
      message: messageOption[type],
      beforeClose: async (action, instance, done) => {
        if (['close', 'cancel'].includes(action)) {
          done()
          return
        }

        if (action === 'confirm') {
          instance.confirmButtonLoading = true
          instance.cancelButtonLoading = true
          let res: null | APIResponse = null
          switch (type) {
            case 'del':
              res = await faultTypesDel(selectedFaultTypeIds.value)
              break
            case 'enable':
              res = await faultTypesEnable(selectedFaultTypeIds.value)
              break
            case 'disable':
              res = await faultTypesDisable(selectedFaultTypeIds.value)
              break
          }
          instance.confirmButtonLoading = false
          instance.cancelButtonLoading = false
          if (res.code === 20000) {
            const successMsgOption = {
              del: infoTip.know.fault.type.deleteSuccess,
              enable: infoTip.know.fault.type.enableSuccess,
              disable: infoTip.know.fault.type.disableSuccess,
            }
            HMessage.success(successMsgOption[type])
            onGetList()
            done()
            return
          }
          HMessageBox.error(res.message)
        }
      },
    })
  }

  defineExpose({
    getList: onGetList,
  })
</script>

<template>
  <div class="fault-type-wrapper">
    <Header
      :selected-fault-type="selectedFaultTypeIds"
      @get-list="onGetList"
      @multiple-delete="handleMultipleOperate('del')"
      @multiple-disable="handleMultipleOperate('disable')"
      @multiple-enable="handleMultipleOperate('enable')"
    ></Header>
    <div class="table">
      <Table ref="tableInstance" @selection-change="handleSelectionChange"></Table>
    </div>
  </div>
</template>

<style lang="scss" scoped>
  .fault-type-wrapper {
    height: 100%;
    box-sizing: border-box;
    padding-top: 12px;
    display: flex;
    flex-direction: column;
    row-gap: 5px;

    .header {
      display: flex;
      justify-content: space-between;

      .btn_group {
        display: flex;
        column-gap: 5px;
      }

      .search {
        display: flex;
        column-gap: 5px;

        :deep(.el-input) {
          width: 228px;
        }
      }
    }

    .table {
      max-height: calc(100% - 33px);
    }
  }
</style>
